/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import {StyleSheet, View, Text, Dimensions, TextInput } from 'react-native';
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader, PCustumTabBar } from '../../library/comp';
import { Dialog, Http, PageBase } from '../../library/func';
import { Modal } from 'antd-mobile-rn';
import Design from '../../design';
import Config from '../../config';

import SplashScreen from 'react-native-splash-screen';



//code push
import codePush from 'react-native-code-push';
//极光推送
import JPushModule from 'jpush-react-native'

/**************************************************************************************** Pageload */

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/**************************************************************************************** Page */
export default class Cablist extends PageBase {
	constructor(props){
		super(props);
		this.state = {


            showModal:false,
			percent:0,
			


			letter_arr:[
			],


			active_letter:"",

			default_list:[
			],

			get_list:{
			}

		};






        codePush.sync({
            updateDialog: {
                mandatoryContinueButtonLabel:'更新',
                mandatoryUpdateMessage:'有新版本了，请您及时更新',
                optionalIgnoreButtonLabel: '稍后',
                optionalInstallButtonLabel: '后台更新',
                optionalUpdateMessage: '有新版本了，是否更新？',
                title: '更新提示'
            },
            installMode: codePush.InstallMode.IMMEDIATE 
        },
        (status) => {
            switch (status) {
                case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                    // 显示进度条弹框
                    this.setState({
                        showModal: true
                    })
                    break;
                case codePush.SyncStatus.INSTALLING_UPDATE:
                    // 隐藏进度条弹框
                    this.setState({
                        showModal: false
                    })
                    break;
            }
        },
        ({ receivedBytes, totalBytes, }) => {

            if(receivedBytes == totalBytes){
                this.setState({
                    showModal: false
                })
            }

            this.setState({
                percent:receivedBytes/totalBytes*100,
            });
            /* 更新进度条参数 */
        }        
        );

        //极光推送
        JPushModule.initPush();
        JPushModule.notifyJSDidLoad((res) => {});
		
	}
	
	/************************************************************************************ Life */
	/**
	 * willMount
	 */
    componentWillMount(){
		SplashScreen.hide();
		this.getList();
	}

	/**
	 * willMount
	 */
	componentDidMount(){
	}

	/**
	 * 获取接口数据
	 */
	getList = () => {
		Http.post({
			url: 'page/box/list.php',
			success: (data)=> {
				console.log('dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',data);

				let letter_arr = [];
				for(let key in data){
					letter_arr.push(key);
				}

				let active_letter = letter_arr[0];

				this.setState({
					get_list:data,
					letter_arr:letter_arr,
					active_letter:active_letter,
					default_list:data[active_letter],
				})
			},
			error : (res) => {
				Dialog.text(res.msg);
				return;
			},
			pipe: Config.pipe.action.default
		})

	}


	/**
	 * 选择字母对应的柜子
	 */
	checkLetter = (item) => {
		if(item in this.state.get_list){
			this.setState({
				active_letter:item,
				default_list:this.state.get_list[item],
			});	
			this.forceUpdate();
		}else{
			Dialog.text("暂时没有查到相关的数据");
		}
	}
	
	/************************************************************************************ Render */
	render() {
		return (
			<CPage bg="#fff">
				<CHand y="top" mt="96" bt="20 solid #efeff4"> 
					<CHand w="650" bg="#fff">
						<CScroll>
							<CRow h="60" x="center" y="center" x="left" mt="10" mb="5" ml="36">
								<CText size="30" color="#999">{ this.state.active_letter }</CText>
							</CRow>

							{
								this.state.default_list.map((item, index) => {
									return(
										<CRow bg="#fff" py="40" y="center" mx="36" bt="1 solid #efeff4" key={item.id}
										onPress={
											(e) => {
												this.nav.navigate('ExpresscabDetail',{id:item.id})
											}
										}
										>
											<CText size="28" lh="36">{ item.position_name + item.position_addr }</CText>
										</CRow>
									)
								})
							}


						</CScroll>
					</CHand>
					<CHand w="100">
						<CScroll>
							{
								this.state.letter_arr.map((item, index)=>{
									return(
										<View style={ this.state.active_letter == item ? { backgroundColor:"#666" } : { backgroundColor:"#aaa" }}>
											<CRow key={index}  h="100" x="center" y="center"
											onPress={
												(e) => {
													this.checkLetter(item);
												}
											}
											>
												<CText size="40" color="#fff">{item}</CText>
											</CRow>
										</View>
									
									)	
								})
							}
						</CScroll>
					</CHand>
				</CHand>
				{/* CHeader */}
                <CHeader h='96' y='center' bg='#fff'>
                    <CBetween px='20'>
						<CHand></CHand>
						<CItemX>
							<CHand mr='60' h='96' bb='4 #26c75e' y='center'
							onPress={
								()=>{
									this.nav.navigate('CablistList')
								}
							}
							>
								<CText size='34' mt='4' color="#26c75e">预约</CText>
							</CHand>
							<CHand h='96' y='center'
							onPress={
								()=>{
									this.nav.navigate('Record')
								}
							}
							>
								<CText size='34'>记录</CText>
							</CHand>
						</CItemX>
                        <CHand w='44' h='44'
							onPress={
								()=>{
									Modal.alert('退出登录', '确定注销登陆', [
										{ text: '取消', onPress: () => console.log('cancel'), style: 'cancel' },
										{ text: '确定', onPress: () => {
											this.nav.navigate('Power')
										} },
									]);
								}
							}
						>
                            <CIcon w='50' h='50' color="#26c75e" icon={ Design.icon["gopass"] }></CIcon>
                        </CHand>
                    </CBetween>
                </CHeader>
			</CPage>
		);
	}
}
